<%--
  Created by IntelliJ IDEA.
  User: 85435
  Date: 2025/7/25
  Time: 11:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据列表</title>
</head>
<body>

    <div>
        <table>
            <tr>
                <td>书名</td>
                <td>数量</td>
                <td>入库时间</td>
                <td>操作</td>
            </tr>
            <tbody id="bookContent">


            </tbody>
        </table>
    </div>

</body>
</html>
<script>
    //什么时候使用ajax访问数据
    window.onload = loadBookList();

    //发送请求  获取书籍列表   渲染页面
    function loadBookList(){
        let url = "/book/list";
        // 创建ajax对象
        let xhr = new XMLHttpRequest();
        // 定义回调函数
        xhr.onreadystatechange =  function callBack(){
            if(xhr.status == 200 && xhr.readyState == 4){
                //解析结果集
                let resultJsonStr = xhr.responseText;
                //将字符串转换为对象，返回的是集合，对象中data属性应该是个数组
                let resultJson = JSON.parse(resultJsonStr);
                if (resultJson.code != 200) {
                    //不等于200，表示业务执行失败，使用弹窗提示失败信息
                    alert(resultJson.msg);
                } else {
                    //使用js 渲染页面,
                    // 获取到后台查询的数据集合，
                    let bookList = resultJson.data;
                    // 遍历集合，渲染页面
                    for (let i in bookList) {
                        let book = bookList[i];
                        //数据行
                        let trStr = "<tr><td>" + book.bookName + "</td>" +
                                        "<td>" + book.count + "</td>" +
                                        "<td>" + book.createTime + "</td>" +
                                        "<td> <a href='update.jsp?id="+book.id+"'>编辑</a> </td>" +
                                    "</tr>"
                        let bookTable = document.getElementById("bookContent");
                        bookTable.innerHTML += trStr;
                    }
                }
            }
        }
        //建立连接
        xhr.open("get",url);
        //发送请求
        xhr.send();
    }



</script>

